$(function () {
    let form = layui.form

    function swiperList() {
        //发送ajax请求获取轮播图列表
        $.ajax({
            type: 'get',
            url: 'admin/swipers',
            success: function (res) {
                console.log(res);
                //将数据和模板结合起来
                let htmlStr = template('trTpl', res)
                //将得到的页面解构放到页面中展示
                $('.layui-table tbody').html(htmlStr)
            }
        })
    }
    swiperList()

    //切换轮播图状态
    //给按钮绑定点击事件,动态生成的需要用事件委托
    $('.layui-table tbody').on('click', '.layui-badge', function (e) {
        let status = $(e.target).data('status')
        let id = $(e.target).data('id')
        //发送ajax请求
        $.ajax({
            type:'put',
            url: 'admin/swipers/' + id,
            data: {
                status: status
            },
            success: function (res) {
                // console.log(res)
                if (res.status === 0) {
                    //成功给提示 
                    layer.msg(res.message)
                    //重新绘制页面
                    swiperList()
                } 
            }
        })
    })

    //删除操作
    //给删除按钮绑定点击事件,动态生成的需要用事件委托
    $('.layui-table tbody').on('click', '.delete', function (e) {
        let id = $(e.target).data('id')
        //弹出层
        layer.confirm('确定要删除吗?', function(index){
            //do something
            //发送ajax请求
            $.ajax({
                type:'delete',
                url:'admin/swipers/' + id,
                success: function (res) {
                    if (res.status === 0) {
                        //删除成功  关闭弹出层
                        layer.close(index)
                        //重新获取数据
                        swiperList()
                    }
                }
            })
          });  
    })

    //批量上传轮播图  
    //点击上传，模拟点击了文件域
    $('body').on('click', '#uploadBtn', function () {
        $('#file').click()
    })

    //文件域change事件
    //当文件域发生改变的时候就会触发change事件
    $('body').on('change', '#file', function (e) {
        // console.log(1)
        let files = e.target.files
        //用new formData来创建实例对象
        let fd = new FormData()
        //循环遍历
        $.each(files, function (index, item) {
            fd.append('swipers', item)
        })
        //通过ajax提交formData数据到服务器上
        $.ajax({
            type:'post',
            url: 'admin/swipers',
            data: fd,
            processData:false,     //不让jQ底层去处理data的数据
            contentType: false,    //不让jQ底层去设置Content-Type, 浏览器会自动设置上的
            success: function (res) {
                // console.log(res)
                if (res.status === 0) {
                    //成功
                    layer.msg(res.message)
                    //重新获取数据
                    swiperList()
                }
            }
        })
    })

})